import type { Meta, StoryObj } from '@storybook/nextjs';

import Image from 'next/legacy/image';

import Accessibility from '../../assets/accessibility.svg';

export default {
  component: Image,
  args: {
    src: Accessibility,
    alt: 'Accessibility',
  },
} as Meta<typeof Image>;

type Story = StoryObj<typeof Image>;

export const Default: Story = {};

export const BlurredPlaceholder: Story = {
  args: {
    placeholder: 'blur',
  },
};

export const BlurredAbsolutePlaceholder: Story = {
  args: {
    src: 'https://storybook.js.org/images/placeholders/50x50.png',
    width: 50,
    height: 50,
    blurDataURL:
      '',
    placeholder: 'blur',
  },
  parameters: {
    // ignoring in Chromatic to avoid inconsistent snapshots
    // given that the switch from blur to image is quite fast
    chromatic: { disableSnapshot: true },
  },
};
